<!--
@description    双向评分记录
@author         秦俊强
@email          458112865@qq.com
@create         2020-01-22 15:20
-->


<!-- html start -->
<template>
  <div class="ant-card ant-card-body">

    <!-- 查询区 start -->
    <div class="menu-box">
      <a-row :gutter="10">
        <a-col :md="24" :sm="24">
          <div class="query-date">
            <span>考核期：</span>
            <a-select v-if="!yearList.loading"
                      :value="yearList.val.text" @change="changeDate" disabled>
              <a-select-option v-for="date in yearList.arr"
                               :key="date.value">{{ date.text }}</a-select-option>
            </a-select>
            <a-select v-else :defaultValue="'数据加载中'" disabled></a-select>
          </div>

          <div class="query-depart-1">
            <span>被评部门：</span>
            <a-tree-select :allowClear="true"
                           :treeDefaultExpandAll="true"
                           :treeData="departInfo.arr" :key="'value'"
                           :dropdownStyle="{ 'max-height': '280px', 'overflow': 'auto' }"
                           @change="onChange" :placeholder="'- 全部 -'"
                           v-model="departInfo.value"></a-tree-select>
          </div>

          <div class="query-depart-2">
            <span>评分部门：</span>
            <a-select v-if="forDepart.arr.length === 0"
                      :notFoundContent="'请选择「被评部门」'"></a-select>
            <a-tree-select v-else
                           :allowClear="true"
                           :treeDefaultExpandAll="true"
                           :treeData="forDepart.arr" :key="'value'"
                           :dropdownStyle="{ 'max-height': '280px', 'overflow': 'auto' }"
                           :placeholder="'- 全部 -'"
                           v-model="forDepart.value"
                           @change="onChange2()"
            ></a-tree-select>
          </div>

          <!--<div class="btn-box">
            <a-button :type="'primary'" icon="search"
                      @click="searchQuery">搜索</a-button>
          </div>-->
        </a-col>

      </a-row>
    </div>
    <!-- 查询区 end -->


    <!-- 内容区 start -->
    <div class="table-box">
      <!-- 表格数据 start -->
      <div class="table-box">
        <a-table :loading="loading"
                 :scroll="tableData.scroll"
                 :columns="tableData.columns"
                 :dataSource="tableData.dataSource"
                  :customRow="click"
                 :pagination="false"></a-table>
      </div>
      <!-- 表格数据 end -->

      <!-- 分页器 start -->
      <div class="pagination-box">
        <a-pagination :current="queryParam.pageNo"
                      :pageSize="queryParam.pageSize"
                      :total="queryParam.total"
                      :pageSizeOptions="['10', '20', '30', '40']"
                      @change="changePage"
                      showSizeChanger
                      @showSizeChange="onShowSizeChange"  />
      </div>
      <!-- 分页器 end -->
    </div>
    <!-- 内容区 end -->

        <!-- 弹窗 月份评价详细 start -->
    <a-modal v-model="modalInfo.show"
             :title="modalInfo.title"
             :width="'60%'"
             :maskClosable="false"
             :footer="null">
      <ScoreModel ref="scoreRef"
                      :departInfo="modalInfo.departInfo"
                      :date="modalInfo.date"></ScoreModel>
    </a-modal>
    <!--  end -->

  </div>
</template>
<!-- html end -->



<!-- js start -->
<script>

  /**
   * api 接口
   *
   * getCheckYearList => 获取评分年分信息
   *
   * getIndexGroupOrgs => 获取部门类别与部门
   *
   * getGradeOrgs => 获取被评分部门与评分部门级联关系
   * getCgDatagrid => 获取双向评分记录
   * */
  import { getCheckYearList, getIndexGroupOrgs, getGradeOrgs, getCgDatagrid } from '@/api/api.js';

  /* 封装通用 api 服务 */
  import { apiService } from '@/api/api.service.js';

  /* 引入表格配置文件 */
  import { tableConfig } from './configs/TwScore.config.js';

  import ScoreModel from '../components/scoreCommon/ScoreModel';


  export default {
    components: {ScoreModel },

    data() {
      return {
        queryParam: {
          pageNo: 1,
          pageSize: 10,
          total: 1
        },

        /* 年月下拉菜单 */
        yearList: {
          loading: false,
          arr: [],    // 可选择的年月列表
          val: {}     // 已选年月，默认数组第 0 个
        },

        /* 被评部门 */
        departInfo: {
          arr: [],
          value: null
        },

        /* 评分部门 */
        forDepart: {
          arr: [],
          value: null
        },

        tableData: tableConfig,
        loading: false,
       /* 弹窗信息 */
        modalInfo: {
          show: false,
          title: '',
          date: '',
          departInfo: {}
        }
      }
    },

    created() {
      /* 获取评分年月 */
      this.yearList.loading = true;
      apiService(getCheckYearList()).then((res) => {
        let list = res.result || [];
        this.yearList = {
          loading: false,
          arr: list,
          val: list[0]
        };

        this.getIndexGroupOrgs();
      }).catch((error) => {
        this.yearList.loading = false;
        this.$message.error(error.message);
      });
    },

    methods: {

      /* 监听考核期变化 */
      changeDate(code) {
        let arr = this.yearList.arr;
        this.yearList.val = arr.find((item) => { return (item.value === code); });
        this.searchQuery();
      },

      /* 监听被评部门值改变 */
      onChange(value) {
        // 将评分部门信息初始化
        this.forDepart.arr = [];
        this.forDepart.value = null;

        if (!value) { return; }

        if (value === 'A01A01A01' || value.substr(0, 9) === 'A01A01A01') {
          this.forDepart.arr.push(this.departInfo.arr[1]);
          this.searchQuery();
          return;
        }

        if (value === 'A01A01A02' || value.substr(0, 9) === 'A01A01A02') {
          this.forDepart.arr.push(this.departInfo.arr[0]);
          this.searchQuery();
        }
      },

      /* 监听评fen部门值变化 */
      onChange2(code) {
        this.searchQuery();
      },

      /* 监听分页条数的改变 */
      onShowSizeChange(current, pageSize) {
        this.queryParam.pageSize = pageSize;

        if (this.tableData.dataSource.length > 0) {
          this.queryParam.pageNo = 1;
          this.searchQuery();
        }
      },

      /* 监听页码改变 */
      changePage(pageNo) {
        this.queryParam.pageNo = pageNo;
        this.searchQuery();
      },

      /* 查询 */
      searchQuery() {
        let t = this;

        let queryParam = t.queryParam;
        let indexYear = t.yearList.val.value;
        let param = {
          pageNo: queryParam.pageNo,
          pageSize: queryParam.pageSize,
          year: indexYear,                          // 考核期
          indexDepart: t.departInfo.value || null,            // 被评分部门 code
          indexExecutorDepart: t.forDepart.value || null      // 评分部门 code
        }

        t.loading = true;
        apiService(getCgDatagrid(param)).then((res) => {
          t.loading = false;
          let resData = res.result;

          if (!resData || (resData && resData.records && resData.records.length === 0)) {
            t.tableData.dataSource = [];
            t.queryParam.pageNo = 1;
            t.queryParam.total = 1;
            return;
          }

          t.tableData.dataSource = resData.records;         // 更新列表
          t.queryParam.pageNo = resData.current;            // 更新页数
          t.queryParam.total = resData.total;
        }).catch((error) => {
          t.loading = false;
          this.$message.error(error.message);
        });
      },

      /* 获取部门类别与部门 */
      getIndexGroupOrgs() {
        apiService(getIndexGroupOrgs()).then((res) => {
          let resData = res.result;

          for (let i = 0; i < resData.length; i++) {
            let item = resData[i];
            let options = {
              title: item.text,
              value: item.value,
              key: item.value,
              // selectable: false,
              children: []
            }

            for (let j = 1; j < item.orgs.length; j++) {
              let cItem = item.orgs[j];
              options.children.push({ title: cItem.text, value: cItem.value, key: cItem.value });
            }

            this.departInfo.arr.push(options);
          }
        }).catch((error) => {
          this.$message.error(error.message);
        });

        this.searchQuery();
      },
      /* 显示评分参考 */
      showRefModal(record) {
        let indexDepartName = record.indexDepartName;
        let indexScorerName = '(' + record.indexScorerName + ')';
        let indexDepartName1 = record.indexExecutorDepartName;
        let indexScorerName1 = '(' + record.indexExecutorName + ')';
        this.modalInfo = {
          show: true,
          title: '被评部门「' + indexDepartName + indexScorerName + '」评分部门「' + indexDepartName1 + indexScorerName1 + '」',
          date: this.yearList.val.value,
          departInfo: record
        }
        let par={
          id:record.id,
          scorerCode:"",
          indexOrgCode:""
        }
        // 通知弹窗组件更新数据
        setTimeout(() => { this.$refs.scoreRef.initData(1,false,par); }, 10);
      },


  click(record, index){
    let _this=this
        return {
            on: {
               click: () => {
                 console.log(record,index)
                 _this.showRefModal(record)
               }
            }
        }
    }
    }
  }
</script>
<!-- js end -->



<!-- css start -->
<style lang="less" scoped>
  .menu-box {
    margin-bottom: 10px;

    [class*="query-"] {
      float: left;
      margin-right: 10px;
    }

    /deep/.ant-select {
      width: 120px;
    }

    .query-depart-1,
    .query-depart-2 {
      /deep/.ant-select {
        width: 180px;
      }
    }
  }

  .table-box {
    /deep/.ant-table th,
    /deep/.ant-table td { white-space: nowrap; }

    .pagination-box {
      margin-top: 20px;
      float: right;
    }
  }
</style>
<!-- css end -->

